{{extend 'layout.html'}}

<style>
.comment,
#addCommentContainer{
    
    /* Syling the comments and the comment form container */
    padding:12px;
    width: 440px;
    position:relative;
    border:1px solid black;
    color:#888;
    margin-top:25px;
    
    /* CSS3 rounded corners and drop shadows */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;

    -moz-box-shadow:2px 2px 0 #c2c2c2;
    -webkit-box-shadow:2px 2px 0 #c2c2c2;
    box-shadow:2px 2px 0 #c2c2c2;
}

.comment .meta {
    margin-bottom: 30px;
    padding: 0px 30px 0px 30px;
    text-align: left;
    font-weight: bold;
}

.comment .meta .date {
    float: left;
}

.comment .meta .posted {
    float: right;
}

.comment .meta a {
}

.comment .entry p {
    white-space: normal !important;
}

input[type=text], input[type=password], textarea
{
    width: 250px; 
    height: 100px; 
}

h2,h3
{
    text-align: center;
}

table, th
{
    font-weight: bold;
}

/* Content */
.comment-page{
    margin: auto;
    width: 468px;
    padding: 0px 0px 0px 0px;
    font-size: 14px;
}

</style>

<script type="text/javascript">
jQuery(document).ready(function()
{ 
  jQuery('#add_comment').hide();
});
</script>

<div class="comment-page">

<div class="comment">
  <table class="meta">
    <tr>
        <th>Title</th>
        <td>{{=record.title}}</td>
    </tr>
    <tr>
        <th>Description</th>
        <td> {{=record.description}} </td>
    </tr>
    <tr>
        <th>Completion Date</th>
        <td> {{=record.completion_date}} </td>
    </tr>
    <tr>
        <th>Assignee</th>
        <td> {{=record.assignee.username}} </td>
    </tr>
    <tr>
        <th>Status</th>
        <td> {{=record.status}} </td>
    </tr>
    <tr>
      <td colspan=2 align='right'>
        <button onclick='jQuery("#add_comment").toggle();' type="button">Comment</button>
      </td>
    </tr>
  </table>
  
</div>

<div id="add_comment">
    <div class="comment" style='margin-top:5px;'>
      <p class="meta">
        {{=form}}
      </p>
    </div>
</div>

{{for post in posts:}}
<div class="comment">
  <p class="meta">
    <span class="date">{{=post.time_posted2}}</span>
    <span class="posted">
      Posted by {{=post.created_by.username}}
      {{ if post.created_by == auth.user_id: }}
        {{=A('(Delete)', _href = URL(r = request,f = 'deleteComment',
                                         args = (post.id)))}}
        {{pass}}
    </span>
  </p>
  <div style="clear: both;">&nbsp;</div>
  <div class="entry">
    {{=MARKMIN(post.comment)}}
  </div>
</div>
{{pass}}

<div style="float: left; margin-top: 10px;">
{{if 2 == len(request.args):}}
  {{if 0 <= (int(request.args[1]) - int(page_size)):}}
    {{=A('(<--previous)',_href=URL('commenttodos',args=[str(request.args[0]),str(int(request.args[1])-int(page_size))]))}}
  {{pass}}
{{pass}}
</div>
<div style="float: right; margin-top: 10px;">
{{if page_size < total_post:}}
  {{if 1 == len(request.args):}}
    {{=A(('(next -->)'),_href=URL('commenttodos',args=[str(request.args[0]),page_size]))}}
  {{elif 2 == len(request.args):}}
    {{=A(('(next -->)'),_href=URL('commenttodos',args=[str(request.args[0]),str(int(request.args[1])+int(page_size))]))}}
  {{pass}}
{{pass}}
</div>
</div>
